import React, { PureComponent } from 'react'
import indexStyle from './index.less'
import { Space, Tabs, Typography } from 'antd'
import MMLogin from './MMLogin'
import WChatLogin from './WChatLogin'
import PasswordLogin from './PasswordLogin'

const { Text } = Typography

class LoginRight extends PureComponent {

  onChange = (key) => {

  }

  render () {
    const items = [
      {
        key: 'wchatLogin',
        label: '微信登录',
        children: <WChatLogin/>
      },
      {
        key: 'freePsdLogin',
        label: '免密登录',
        children: <MMLogin/>
      },
      {
        key: 'passwordLogin',
        label: '密码登录',
        children: <PasswordLogin/>
      },
    ]
    return (
      <div className={indexStyle.loginRight} >
        <div className={indexStyle.loginHeader}>
          <Text strong style={{ fontSize: 20 }}>登录可享更多权益</Text><br/>
          <Text strong style={{ fontSize: 20 }}>扫码签到领取 </Text>
          <Text strong type={'danger'} style={{ fontSize: 20 }}>现金和下单优惠券</Text>
        </div>
        <div className={indexStyle.loginContent}>
          <Tabs defaultActiveKey="wchatLogin" items={items} onChange={this.onChange}/>
        </div>
        <div className={indexStyle.loginBottom}>
          <Text style={{ fontSize: 12, color: '#ccc' }}>其他登录方式</Text>
          <div>
            <Space className={indexStyle.loginBottomOtherWay}>
              <a/>
              <a/>
              <a/>
              <a/>
              <a/>
              <a/>
              <a/>
            </Space>
          </div>
        </div>
      </div>
    )
  }

}

export default LoginRight
